﻿@model List<NWNT.Web.Models.QuestionnaireAreaModel>
@{
    ViewBag.Title = "Questionnaire";
}
<script type="text/javascript">
    function NextArea() {
        var optionSelected = true;
        $("div[id^=Area]:visible").children("table").children("tbody").children("tr").each(function () {
            if ($(this).find("input[type=radio]:checked").length === 0) {
                $(this).css('color', '#990000').css('font-weight', 'bold');
                optionSelected = false;
                //return false;
            }
            else {
                $(this).css('color', '#666').css('font-weight', 'normal');
            }
        });

        if (optionSelected) {
            if ($("div[id^=Area]:visible").next("div[id^=Area]").length > 0) {
                $("div[id^=Area]:visible").hide().next("div[id^=Area]").show();
                $("input[name=Previous]").show();
                if ($("div[id^=Area]:visible").next("div[id^=Area]").length > 0) {
                    $("input[name=Next]").show();
                } else {
                    $("input[name=Next]").hide();
                }
            }
            
        } else {
            window.showToast('Please select appropriate option for all the questions.', 'Questionnaire', 4);
        }
    }
    function PreviousArea() {
        if ($("div[id^=Area]:visible").prev("div[id^=Area]").length > 0) {
            $("div[id^=Area]:visible").hide().prev("div[id^=Area]").show();
            $("input[name=Next]").show();
            if ($("div[id^=Area]:visible").prev("div[id^=Area]").length > 0) {
                $("input[name=Previous]").show();
            } else {
                $("input[name=Previous]").hide();
            }
        }
       
    }




    $(document).ready(function () {
        var bar = $(".progressbar").progressbar();
        //bar.progress(0);

        $("form.form-horizontal").submit(function () {
            var optionSelected = true;
            $("div[id^=Area]").each(function () {
                $(this).children("table").children("tbody").children("tr").each(function () {
                    if ($(this).find("input[type=radio]:checked").length === 0) {
                        optionSelected = false;
                        return false;
                    }
                });
            });

            if (!optionSelected) {
                window.showToast("Please select appropriate option for all the questions.", 'Questionnaire', 4);
            }

            return optionSelected;
        });

        $("table.table-striped").click(function (evt, args) {
            if ($(evt.target).find("input[type=radio]").length === 1) {
                $(evt.target).find("input[type=radio]").attr("checked", true);//.click();
            }
            $(evt.target).closest('tr').css('color', '#666').css('font-weight', 'normal');
            if (evt.target.type === "radio" || $(evt.target).find("input[type=radio]").length === 1) {
                var noOfQuesAnswered = 0;

                $("div[id^=Area]").each(function () {
                    $(this).children("table").children("tbody").children("tr").each(function () {
                        if ($(this).find("input[type=radio]:checked").length > 0) {
                            noOfQuesAnswered += 1;
                        }
                    });
                });

                bar.progress(noOfQuesAnswered * 2);
            }
        });
    });
</script>
<h2>Questionnaire</h2>
<form class="form-horizontal" method="post" action="Questionnaire" role="form">
    <div class="progressbar"></div>
    <div>(valid for student class 10th and above only)</div>
    @for (int i = 0; i < Model.Count(); i++)
    {
        <div id="@("Area" + Model[i].QuestionAreaId)" style="display:none;">
            @Html.HiddenFor(m => m[i].QuestionAreaId)
            @Html.HiddenFor(m => m[i].Area)
            <div>@Model.ElementAt(i).Area</div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Sl #</th>
                        <th>Question</th>
                        @for (int j = 0; j < Model[i].Options.Count(); j++)
                        {
                            @Html.HiddenFor(m => m[i].Options[j].Optionid)
                            @Html.HiddenFor(m => m[i].Options[j].OptionName)
                            <th>@Model.ElementAt(i).Options.ElementAt(j).OptionName</th>
                        }
                    </tr>
                </thead>
                <tbody>
                    @for (int j = 0; j < Model[i].Questions.Count(); j++)
                    {
                        @Html.HiddenFor(m => m[i].Questions[j].QuestionId)
                        <tr>
                            <td>@Model.ElementAt(i).Questions.ElementAt(j).QuestionId</td>
                            <td>@Model.ElementAt(i).Questions.ElementAt(j).Question</td>
                            @for (int k = 0; k < Model[i].Options.Count(); k++)
                            {
                                <td>
                                    <label>@Html.RadioButtonFor(m => m[i].Questions[j].SelectedOptionId, Model[i].Options[k].Optionid)</label>
                                </td>
                            }

                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }
    <input type="button" onclick="PreviousArea();" name="Previous" value="Previous" class="btn btn-primary" style="display:none;" />
    <input type="button" onclick="NextArea();" name="Next" value="Next" class="btn btn-primary" />
    <input id="QuestionnaireSubmit" type="submit" value="Submit" class="btn btn-primary" />
</form>
<script type="text/javascript">
    $(document).ready(function () {
        $($("div[id^=Area]")[0]).show();
    });
</script>
